<template>
  <div>
    <Modal
      v-model='showStatus'
      :title="(!isEdit ? '添加' : '编辑') + '资源信息'"
      @on-ok='ok'
      @on-cancel='cancel'
      :loading='loading'
    >
      <Form
        :model='localItem'
        :label-width='80'
        :rules='ruleValidate'
        ref='table'
      >
        <FormItem label='资源名称' prop='name'>
          <Input v-model='localItem.name' placeholder='请输入资源名称'></Input>
        </FormItem>
        <FormItem label='资源路径' prop='path'>
          <Input v-model='localItem.path' placeholder='请输入资源路径'></Input>
        </FormItem>
        <FormItem label='请求类型' prop='method'>
          <Select v-model='localItem.method' style='width: 200px'>
            <Option value='POST'>POST</Option>
            <Option value='GET'>GET</Option>
            <Option value='DELETE'>DELETE</Option>
            <Option value='UPDATE'>UPDATE</Option>
          </Select>
        </FormItem>
        <FormItem label='资源类型' prop='type'>
          <Select v-model='localItem.type' style='width: 200px'>
            <!--            <Option value="1">api</Option>-->
            <!--            <Option value="2">按钮</Option>-->
            <Option v-for='item in types' :value='item.value' :key='item.value'
            >{{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label='资源描述'>
          <Input
            type='textarea'
            v-model='localItem.remark'
            placeholder='请输入资源描述'
          ></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { resourceDispatch } from '@/api/admin'

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {
    item(newVal, oldVal) {
      this.localItem = { ...newVal }
    },
    isShow() {
      this.showStatus = this.isShow
    }
  },
  data() {
    return {
      loading: true,
      showStatus: false,
      localItem: {
        name: '',
        path: '',
        method: '',
        type: 0,
        remark: ''
      },
      ruleValidate: {
        name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
        path: [{ required: true, message: '请输入资源路径', trigger: 'blur' }],
        method: [
          { required: true, message: '请选择请求方式', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择资源类型', trigger: 'blur' }]
      },
      types: [
        {
          value: 1,
          label: '接口'
        },
        {
          value: 2,
          label: '按钮'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    ok() {
      this.$refs.table.validate((valid) => {
        if (valid) {
          this.loading = false
          resourceDispatch.use('add', this.localItem).then((res) => {
            if (res.code === 200) {
              this.$emit('changeEvent', false)
              this.$emit('editEvent', { ...this.localItem })
              setTimeout(() => {
                this.$refs.table.resetFields()
              }, 0)
              this.$Message.info('添加成功！')
            }
          })
        } else {
          this.loading = false
          this.$nextTick(() => (this.loading = true))
          this.$Message.error('请检查输入数据')
        }
      })
    },
    cancel() {
      this.$refs.table.resetFields()
      this.$emit('changeEvent', false)
      this.$Message.info('取消编辑！')
    }
  }
}
</script>
